<script>
export default {
  render: function(createElement) {
    return createElement("div", {
      attrs: {
        id: "main"
      },
      style: {
        height: "450px"
      }
    });
  },
  props: {
    mapData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    title: {
      type: String,
      default: "地图"
    }
  },
  watch: {
    mapData() {
      this.initData();
    }
  },
  data() {
    return {
      dataList: [
        { name: "南海诸岛" },
        { ename: "beijing", name: "北京" },
        { ename: "tianjin", name: "天津" },
        { ename: "shanghai", name: "上海" },
        { ename: "chongqing", name: "重庆" },
        { ename: "hebei", name: "河北" },
        { ename: "henan", name: "河南" },
        { ename: "yunnan", name: "云南" },
        { ename: "liaoning", name: "辽宁" },
        { ename: "heilongjiang", name: "黑龙江" },
        { ename: "hunan", name: "湖南" },
        { ename: "anhui", name: "安徽" },
        { ename: "shandong", name: "山东" },
        { ename: "xinjiang", name: "新疆" },
        { ename: "jiangsu", name: "江苏" },
        { ename: "zhejiang", name: "浙江" },
        { ename: "jiangxi", name: "江西" },
        { ename: "hubei", name: "湖北" },
        { ename: "guangxi", name: "广西" },
        { ename: "gansu", name: "甘肃" },
        { ename: "shanxi", name: "山西" },
        { ename: "neimenggu", name: "内蒙古" },
        { ename: "shanxi1", name: "陕西" },
        { ename: "jilin", name: "吉林" },
        { ename: "fujian", name: "福建" },
        { ename: "guizhou", name: "贵州" },
        { ename: "guangdong", name: "广东" },
        { ename: "qinghai", name: "青海" },
        { ename: "xizang", name: "西藏" },
        { ename: "sichuan", name: "四川" },
        { ename: "ningxia", name: "宁夏" },
        { ename: "hainan", name: "海南" },
        { name: "台湾" },
        { ename: "xianggang", name: "香港" },
        { ename: "aomen", name: "澳门" }
      ],
      maxNum: 0,
      minNum: 0
    };
  },
  methods: {
    initData() {
      let d = this.dataList;
      let newVal = this.mapData;
      let maxNum = this.maxNum,
        minNum = this.minNum;
      for (let j = 0; j < d.length; j++) {
        d[j].value = 0;
      }
      for (let i = 0; i < newVal.length; i++) {
        for (let j = 0; j < d.length; j++) {
          if (newVal[i].name.indexOf(d[j].name) != -1) {
            d[j].value = newVal[i].value;
            maxNum = Math.max(maxNum, newVal[i].value);
            minNum = Math.min(minNum, newVal[i].value);
            break;
          }
        }
      }
      (this.maxNum = maxNum), (this.minNum = minNum);
      this.initEchart();
    },
    initEchart() {
      const _this = this;
      var myChart = echarts.init(document.getElementById("main"));
      var option = {
        title: {
          text: this.title
        },
        tooltip: {
          //数据格式化
          formatter: function(params, callback) {
            return (
              params.seriesName + "<br />" + params.name + "：" + params.value
            );
          }
        },
        visualMap: {
          min: this.minNum,
          max: this.maxNum,
          left: "left",
          top: "bottom",
          text: ["高", "低"], //取值范围的文字
          inRange: {
            color: ["#e0ffff", "blue"] //取值范围的颜色
          },
          show: true //图注
        },
        geo: {
          map: "china",
          roam: false, //不开启缩放和平移
          zoom: 1, //视角缩放比例
          label: {
            normal: {
              show: true,
              fontSize: "10",
              color: "rgba(0,0,0,0.7)"
            }
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(0, 0, 0, 0.2)"
            },
            emphasis: {
              areaColor: "skyblue", //鼠标选择区域颜色
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        },
        // 鼠标悬浮提示框
        series: [
          {
            name: "省份",
            type: "map",
            geoIndex: 0,
            data: this.dataList
          }
        ]
      };
      myChart.setOption(option);
      myChart.on("click", function(params) {
        // if (!params.data.ename) {
        //   alert("暂无" + params.name + "地图数据");
        //   return;
        // }
        // _this.$router.push({
        //   path: "/province",
        //   query: { provinceName: params.data.ename, province: params.name }
        // });
      });
    }
  },
  mounted() {
    this.initData();
  }
};
</script>
